<script setup lang="ts">
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
import 'vant/es/toast/style'
const router = useRouter()

let phone = ref('')
const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
let flag = ref(false)
let isGetCode = ref(false)
let countDown = ref(60)
let timer = ref(-1)
let show = ref(false)
// 当前随机验证码
let currentCode = ref('')
// 输入框绑定的验证码
let code = ref('')

const changeVal = () => {

    if (phone.value) {
        flag.value = reg.test(phone.value)

    }
}

const getCode = () => {
    if (flag.value) {
        isGetCode.value = true
        timer.value = setInterval(() => {
            countDown.value -= 1
            // console.log(this.countDown);
            if (countDown.value == 0) {
                clearInterval(timer.value)
                timer.value = -1
                isGetCode.value = false
                countDown.value = 60
            }

            if (countDown.value == 50) {
                show.value = true

                for (let index = 0; index < 7; index++) {
                    currentCode.value += parseInt(((Math.random() * 10 ).toFixed(0)) ) 
                }

                setTimeout(() => {
                    show.value = false
                }, 2000);
            }
        }, 1000);


    }
}


const signFn=()=> {

    if (code.value.trim()) {

        if (currentCode.value == code.value) {
            sessionStorage.token = code.value
            showSuccessToast('登录成功');
            code.value = ''
            phone.value = ''
            clearInterval(timer.value)
            timer.value = -1
            isGetCode.value = false
            countDown.value = 60
            flag.value = false
            currentCode.value = ''
            show.value = false
            router.go(-1)
        } else {
            showFailToast('验证码错误');
        }

    } else if (flag.value) {
        if (!code.value.trim()) {
            showFailToast('请输入验证码');
        }
    }


}
</script>


<template>
    <div class="sign-in">

        <div class="my-nav-bar">
            <van-nav-bar>
                <template #left>
                    <van-icon name="arrow-left" size="18" color="#000" />
                </template>
                <template #right>
                    <span class=" text-base">
                        帮助
                    </span>
                </template>
            </van-nav-bar>
        </div>

        <div class="main mt-5 mx-auto w-4/5">

            <h2 class=" text-2xl">登录发现更多精彩</h2>

            <div class="input-phone mt-5 flex items-center pb-2" style="border-bottom: 2px solid #ccc;">
                <span class="flex h-4 text-sm items-center pr-1 mr-1" style="border-right: 2px solid #ccc;">
                    +86
                    <van-icon name="arrow-down" />
                </span>

                <input type="number" v-model.trim="phone" @input="changeVal" placeholder="请输入手机号">

            </div>

            <div class="input-code flex justify-around mt-4 h-8 items-center" style="border-bottom: 2px solid #ccc;">
                <input v-model="code" class=" p-1 w-2/3" type="number" placeholder="请输入验证码">
                <div v-show="!isGetCode" @click="getCode" class=" ml-2 p-1 h-full" :class="{ active: flag }">获取验证码</div>
                <span v-show="isGetCode" class=" ml-4 p-1  h-full  text-center w-1/3 text-blue-500">{{ countDown }}</span>
            </div>

            <div class="popup">
                <van-popup :round="true" :overlay="false" position="top" :style="{ height: '15%' }" v-model:show="show" >
               

                    <div class="py-3 px-3  w-fill flex items-center flex-col bg-gray-200">
                        <span class="w-5/6 text-base font-bold">
                            【喜山】验证码:{{ currentCode }}, 10分钟内可用,请勿向任何人泄露。
                        </span>

                        <span @click="code = currentCode" class=" w-5/6 text-gray-400 text-right ">
                            导入验证码
                        </span>
                    </div>

                </van-popup>
            </div>

            <div @click="signFn" class="btn w-full text-center mt-5 p-2 bg-gray-400 " :class="{ 'active-btn': flag }">
                登录
            </div>



        </div>
    </div>
</template>



<style lang="scss" scoped>
.sign-in {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 10;
    .active {
        color: skyblue;
    }

    .active-btn {
        background-color: tomato;
        color: #fff;
    }
}
</style>